<template>
  <div>
    <el-table :data="auths" style="width: 100%; height: 100%; font-size: 13px">
      <el-table-column label="序号" align="center" type="index" width="55px"/>
      <el-table-column label="绑定账号平台" align="center" :show-overflow-tooltip="true">
        <template #default="scope">
          {{getDictLabel(sys_social_auth, scope.row.source)}}
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center" prop="avatar">
        <template #default="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 45px; height: 45px" />
          <img v-else :src="avatar" style="width: 45px; height: 45px" />
        </template>
      </el-table-column>
      <el-table-column
        label="系统账号"
        align="center"
        prop="userName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="绑定时间"
        align="center"
        prop="createTime"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            type="danger"
            size="default"
            icon="Delete"
            link
            @click="unlockAuth(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div id="git-user-binding">
      <h4 class="provider-desc">你可以绑定以下第三方帐号用于Future系统</h4>
      <div id="authlist" class="user-bind">
        <template v-for="item in authConfigList">
          <a class="third-app" href="#" @click="authUrl(item.sourceType);" title="使用 码云 账号授权登录">
            <div class="git-other-login-icon">
              <svg width="100" height="100" viewBox="0 0 100 100"><svg-icon :icon-class="item.sourceIcon" /></svg>
            </div>
            <span class="app-name">{{getDictLabel(sys_social_auth, item.sourceType)}}</span>
          </a>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { unbinding, binding } from "@/api/social/auth.js";
import { listConfigOfOn } from "@/api/social/config.js";
import { getDictLabel, useDict } from '@/utils/dict'
import avatar from '@/assets/images/avatar.png'

export default {
  props: {
    auths: {
      type: Array
    }
  },
  data() {
    return {
      authConfigList: null,
      sys_social_auth: null,
      avatar: avatar
    };
  },
  methods: {
    getDictLabel,
    unlockAuth(index, row) {
      var _this = this;
      this.$modal
        .confirm('您确定要解除"' + row.source + '"的账号绑定吗？')
        .then(function () {
          return unbinding(row.authId);
        })
        .then(() => {
          _this.auths.splice(index, 1);
          this.$modal.msgSuccess("解绑成功");
        })
        .catch(() => {});
    },
    authUrl(source) {
       binding(source).then(res => {
		      top.location.href = res.msg;
       });
    }
  },
  created() {
    listConfigOfOn().then(response => {
      this.authConfigList = response.rows;
    });
    this.sys_social_auth = useDict('sys_social_auth')['sys_social_auth']
  }
};
</script>

<style type="text/css">
.user-bind .third-app {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 80px;
  float: left;
}
.user-bind {
  font-size: 1rem;
  text-align: start;
  height: 50px;
  margin-top: 10px;
}
.git-other-login-icon svg {
  width: 20px;
  height: 20px;
}
.app-name {
  font-size: small;
}
a {
  text-decoration: none;
  cursor: pointer;
  color: #005980;
}
.provider-desc {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans",
    "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei",
    "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp",
    sans-serif;
  font-size: 14px;
}
</style>
